<script setup>
import dayjs from 'dayjs';
import { map, omit } from 'lodash-es';
import { useRequest } from '@/hooks/requestHooks.js';
import { useDownload, useResetForm } from '@/hooks/tool';
import { useMain } from '@/store/app.js';
import { getTGOperationData, getJCOperationData, uploadRepImg } from '@/api/index.js';
import { Message } from 'element-ui';
import EntSubAll from '@/views/components/EntSubAll.vue';
import RepJC from '@/views/components/RepJC.vue';
import RepTG from '@/views/components/RepTG.vue';

const { projectType } = useMain();
const queryForm = ref(null);
const entSubAll = ref(null);
const repJC = ref(null);
const repTG = ref(null);
const repTitle = ref('--');
const queryParams = ref({ type: projectType, month: '' });

const repParams = ref({
  belong: '1',
  buildingCodes: [],
  dateType: 'm',
  dateStart: queryParams.value.month,
  dateEnd: queryParams.value.month,
  projectType: queryParams.value.type,
  isReport: true,
});
const [TGChart, loading1, runTG] = useRequest(getTGOperationData, { manual: true });
const [JCChart, loading2, runJC] = useRequest(getJCOperationData, { manual: true });

const resetRepParams = () => {
  repParams.value.dateStart = queryParams.value.month;
  repParams.value.dateEnd = queryParams.value.month;
  repParams.value.buildingCodes = [];
  entSubAll.value.checkList = [];
};
// const resetQuery = () => {
//   useResetForm(queryForm);
//   resetRepParams();
// };
const tabChange = val => {
  repParams.value.projectType = val;
  queryParams.value.month = null;
  repTitle.value = '--';
  TGChart.value = null;
  JCChart.value = null;
  resetRepParams();
};
const handleMonthChange = val => {
  repParams.value.dateStart = val;
  repParams.value.dateEnd = val;
};
const handleDownload = async () => {
  if (repParams.value.buildingCodes.length > 0 && repParams.value.dateEnd) {
    const timestamp = dayjs().valueOf();
    const imgArr = queryParams.value.type === 'TG' ? repTG.value.getChartImgs() : repJC.value.getChartImgs();
    await Promise.all(map(imgArr, (v, i) => uploadRepImg({ index: i, exportId: timestamp, pictureBase64: v })));
    useDownload('/energyservice/report/export', {
      ...omit(repParams.value, ['isReport']),
      exportId: timestamp,
      oneInstitutionName: repParams.value.buildingCodes.length <= 1 ? repTitle.value : null,
    });
  } else {
    Message.warning(repParams.value.dateEnd ? '请选择要报告的机构' : '请选择要报告的月份');
  }
};

const handleReport = params => {
  if (repParams.value.dateEnd) {
    repTitle.value = params.length <= 1 ? params[0].enterpriseName : '国网山西综合能源服务有限公司';
    repParams.value.buildingCodes = map(params, v => v.enterpriseCode);
    queryParams.value.type === 'TG' ? runTG(repParams.value) : runJC(repParams.value);
  } else {
    Message.warning('请选择要报告的月份');
  }
};
</script>

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="u-p20 u-base-fg u-mb20">
      <el-form-item prop="type">
        <el-radio-group v-model="queryParams.type" size="small" @input="tabChange">
          <el-radio-button label="JC">监测</el-radio-button>
          <el-radio-button label="TG">托管</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="统计月份" prop="month">
        <el-date-picker
          v-model="queryParams.month"
          type="month"
          value-format="yyyy-MM"
          placeholder="请选择"
          size="small"
          align="left"
          clearable
          @change="handleMonthChange"
        />
      </el-form-item>
      <!-- <el-form-item>
        <el-button size="small" type="primary" plain @click="resetQuery">重置</el-button>
      </el-form-item> -->
    </el-form>
    <div class="u-df-st" style="height: calc(100% - 100px)">
      <div class="engConsumptionRep-left u-base-fg u-h100">
        <EntSubAll ref="entSubAll" :type="queryParams.type" @handleReport="handleReport" />
      </div>
      <div class="engConsumptionRep-right u-df-ct u-fd-col u-base-fg">
        <el-button class="downLoad u-df-ct" @click="handleDownload">
          <i class="el-icon-download u-primary u-fs20"></i>
        </el-button>
        <div class="rep-bg">
          <div class="rep-wrapper rep-idx">
            <img src="@/assets/images/repBg.png" alt="" />
            <div class="rep-title">
              <div class="u-mb5">{{ repTitle }}</div>
              <div>机构运营报告</div>
            </div>
            <div class="rep-date">
              <div>{{ queryParams.month?.split('-')?.[0] ?? '--' }}</div>
              <div>
                {{ queryParams.month?.split('-')?.[1] ?? '--' }}
                <span class="u-ml20 u-fs14">月</span>
              </div>
            </div>
          </div>
          <RepTG
            v-if="queryParams.type === 'TG' && TGChart"
            ref="repTG"
            v-loading="loading1"
            :month="queryParams.month"
            :data="TGChart"
            :params="repParams"
          />
          <RepJC
            v-if="queryParams.type === 'JC' && JCChart"
            ref="repJC"
            v-loading="loading2"
            :month="queryParams.month"
            :data="JCChart"
            :params="repParams"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.rep-content {
  .rep-content-title {
    line-height: 24px;
    margin: 20px 0;
    color: #1e787c;
    font-size: 16px;
    font-weight: bold;
  }
  .rep-content-subtitle {
    line-height: 20px;
    margin: 20px 0;
    color: #000;
    font-size: 14px;
    font-weight: bold;
  }
  .rep-content-text {
    font-size: 14px;
    color: #000;
    line-height: 20px;
    text-indent: 2em;
  }
  .rep-content-totalTable {
    width: 100%;
    margin-bottom: 20px;
    /* 取消th td 之间的间隔 */
    border-collapse: collapse;
    border-spacing: 0;
    color: #000;
    border-bottom: 1px solid #d4d4d4;
    font-size: 14px;
    th {
      text-align: center;
      font-weight: normal;
      background-color: #d2e4e5;
      padding: 5px 0;
      border-right: 1px solid #d4d4d4;
      border-bottom: 1px solid #d4d4d4;
    }
    tr td {
      text-align: center;
      padding: 5px 0;
      border-right: 1px solid #d4d4d4;
      border-bottom: 1px solid #d4d4d4;
    }
    tr > td:first-of-type {
      background-color: #d2e4e5;
    }
  }
}
.u-rep-m20 {
  margin: 20px 0;
}
</style>
<style lang="scss" scoped>
.engConsumptionRep-left {
  width: 18%;
}
.engConsumptionRep-right {
  box-sizing: border-box;
  width: calc(82% - 20px);
  height: 100%;
  padding: 20px 0;
  margin-left: 20px;
  justify-content: flex-start;
  overflow-y: auto;
  .downLoad {
    padding: 8px 12px;
    position: fixed;
    top: 255px;
    right: 50px;
  }
  .rep-bg {
    width: 70%;
    background-color: #fff;
  }
  .rep-wrapper {
    width: 90%;
    height: auto;
    margin: 0 auto;
  }
  .rep-idx {
    position: relative;
    > img {
      width: 100%;
      height: auto;
    }
    .rep-title {
      width: calc(100% - 120px);
      position: absolute;
      left: 60px;
      top: 16%;
      font-weight: bold;
      font-size: 40px;
      color: #1c6681;
    }
    .rep-date {
      border: 1px solid #41a3c8;
      position: absolute;
      left: 60px;
      top: 30%;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      > div:first-of-type {
        padding: 0 20px;
        line-height: 1.5;
        background-color: #41a3c8;
        color: #fff;
        font-size: 30px;
      }
      > div:last-of-type {
        padding: 0 20px;
        line-height: 50px;
        color: #41a3c8;
        font-size: 40px;
        span {
          font-weight: normal;
        }
      }
    }
  }
}
:deep(.el-form-item) {
  margin-bottom: 0;
  height: 40px;
}
.app-dark .engConsumptionRep-right :deep(.downLoad.el-button:hover) {
  background-color: #0f162a;
}
</style>
